<template>
	<view class="login-container">
		<image class="bg" src="../../static/images/login_bg.png"></image>
		<view class="header">
			<image class="logo" src="../../static/logo.png" mode=""></image>
			<text class="header__title">水果市场OA系统</text>
		</view>
		<view class="content">
			<view class="content__title">登录</view>
			<view class="form">
				<view class="form-item">
					<jec-input v-model="form.username" label="账号" icon="&#xe6d4" iconSize="36rpx" />
				</view>
				<view class="form-item">
					<jec-input v-model="form.password" label="密码" icon="&#xe679" password />
				</view>
				<view class="form-item form-item-button">
					<jec-button @click="login" type="primary" :loading="loading">登 录</jec-button>
				</view>
				<view class="form-item form-item-agreement">
					<jec-agreement v-model="isAgree" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useUserStore } from '@/stores/user.js'
	const userStore = useUserStore()
	
	const loading = ref(false)
	const isAgree = ref(false)
	const form = ref({
		username: '',
		password: ''
	})
	const username = ref('')
	const password = ref('')
	
	const login = () => {
		if (!isAgree.value) {
			uni.showToast({ title: '请阅读并同意《用户协议》和《隐私政策》', icon: 'none' })
			return
		}
		loading.value = true
		userStore.login(form.value)
			.then(res => {
				loading.value = false
				uni.reLaunch({
					url: '/pages/index/index'
				})
			})
			.catch(() => (loading.value = false))
	}
	
	if (uni.getStorageSync('token')) {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
.login-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	.bg {
		position: absolute;
		width: 750rpx;
		height: 962rpx;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.header {
		position: absolute;
		top: 132rpx;
		left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.logo {
			width: 40rpx;
			height: 56rpx;
			margin-right: 16rpx;
		}
		.header__title {
			font-size: 40rpx;
		}
	}
	.content {
		height: 1048rpx;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 40rpx;
		background-color: #fff;
		padding-top: 32rpx;
		.content__title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
		}
		.form {
			padding: 64rpx 32rpx;
			.form-item {
				& + .form-item {
					padding-top: 40rpx;
				}
				&.form-item-button {
					padding-top: 120rpx;
				}
				&.form-item-agreement {
					padding-top: 20rpx;
				}
			}
		}
	}
}
</style>
